<template>
  <div class="searchSet">
    <div style="padding:15px 15px 0 15px;">
      <div class="title">搜索热词</div>
      <p class="deco-help-desc">
        鼠标拖拽调整热词顺序，搜索框默认展示第一个热词，其他搜索词将以标签形式显示在搜索页中
      </p>
      <div class="group-wrap">
        <draggable :list="config.sub_entry" class="list-group" :animation="200">
          <div
            class="list-group-item"
            style="padding:15px;"
            v-for="(item, index) in config.hot_search_keys"
            :key="index"
          >
            <el-input v-model="item.val"></el-input>
            <div class="item-delete" @click="deleteListItem(index)">
              <i class="el-icon-error"></i>
            </div>
          </div>
        </draggable>
        <div class="list-group">
          <div class="list-group-item" style="padding:0;">
            <div class="edit-add" @click="addNav">添加热词</div>
          </div>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="deco-control">
      <div class="deco-control-group">
        <div class="deco-control-group-container">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">框体样式</div>
            <div class="deco-control-group__value">
              {{ config.border_style_method ? '圆形' : '方形' }}
            </div>
          </div>
          <div class="deco-control-group__content">
            <el-radio-group v-model="config.border_style_method" size="mini">
              <el-radio-button :label="0">
                <i class="el-icon-picture"></i>
              </el-radio-button>
              <el-radio-button :label="1">
                <i class="el-icon-picture"></i>
              </el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <div class="deco-control-group-container">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">文本位置</div>
            <div class="deco-control-group__value">
              {{ config.text_align_method ? '居左' : '居中' }}
            </div>
          </div>
          <div class="deco-control-group__content">
            <el-radio-group v-model="config.text_align_method" size="mini">
              <el-radio-button :label="0">
                <i class="el-icon-picture"></i>
              </el-radio-button>
              <el-radio-button :label="1">
                <i class="el-icon-picture"></i>
              </el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <div class="deco-control-group-container">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">框体高度</div>
          </div>
          <div class="deco-control-group__content">
            <el-slider :max="40"
              v-model="config.border_style_height"
              style="width:160px;margin-right:10px;"
            ></el-slider>
            <el-input-number
              size="small"
              style="width:60px;"
              v-model="config.border_style_height"
              :min="1"
              :controls="false"
            ></el-input-number>
          </div>
        </div>

        <div class="deco-control-group-container">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">背景颜色</div>
            <div class="deco-control-group__value">
              {{ config.color }}
            </div>
          </div>
          <div class="deco-control-group__content">
            <el-color-picker
              v-model="config.color"
              color-format="hex"
              :predefine="defaultColor"
            />
          </div>
        </div>

        <div class="deco-control-group-container">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">框体颜色</div>
            <div class="deco-control-group__value">
              {{ config.border_style_color }}
            </div>
          </div>
          <div class="deco-control-group__content">
            <el-color-picker
              v-model="config.border_style_color"
              color-format="hex"
              :predefine="defaultColor"
            />
          </div>
        </div>

        <div class="deco-control-group-container">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">文本颜色</div>
            <div class="deco-control-group__value">
              {{ config.text_color }}
            </div>
          </div>
          <div class="deco-control-group__content">
            <el-color-picker
              v-model="config.text_color"
              color-format="hex"
              :predefine="defaultColor"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import draggable from 'vuedraggable'

export default {
  components: { draggable },
  props: ['value','defaultColor'],
  data() {
    return {
      config: this.value ? this.value : {},
      rules: {}
    }
  },
  watch: {
    value(newVal) {
      this.config = newVal
    },
    config(newVal, oldVal) {
      this.$emit('input', newVal)
    }
  },
  methods: {
    deleteListItem(index) {
      this.config.hot_search_keys.splice(index, 1)
    },
    addNav() {
      this.config.hot_search_keys.push({ val: '' })
    }
  }
}
</script>

<style lang="less">
@import './common.less';
</style>
